<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>用户登录界面</title>
    <link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet">
    <script th:src="@{/login/js/bootstrap1.js}"></script>
    <link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<!--  用户登录form表单 -->
<!--
${} 是“读配置”——纯数据。
#{} 是“写代码”——能调 Bean、能运算、能传参。
#{}和${}的差别：
看见 @Value 后面跟 properties 里的 key → 直接 ${}。
需要 调方法、做运算、拿容器里的 Bean → 一定 #{}。
在 Thymeleaf框架：模板引擎(提供一些特定语法，可以通过特定语法来自动生成网页中的一些代码) 里：
把 Controller 塞到 Model 里的数据展示出来 → ${}。
想在模板里 格式化、调用工具类 替换内容→ #{}

jsp：最早的模板引擎，不能很好实现前后端分离

th:text  改变当前元素的文本内容
th:任意属性  替换原生属性的值

变量表达式${}：
直接使用th:xx="${}"获取对象属性：如：
<h3 class="card-title" th:text="${product.name}"></h3>

链接表达式：项目内的路径，项目外的直接http,通过链接表达式直接拿到应用路径，拼接静态资源路径，针对href路径或src路径，如：
<link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet">
<script th:src="@{/login/js/bootstrap1.js}"></script>
<img class="mb-4" th:src="@{/login/img/login.jpg}">
<a th:href="@{/productTable}">跳转</a>

消息表达式#{}:
通常的国际化属性：#{msg}用于获取国际化语言翻译值，英语转为汉语，文字替换：
<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
-->
<form class="form-signin" action="/login" method="post">
    <a th:href="@{/productTable}">跳转</a>
    <img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}"></h1>
    <input type="text" class="form-control"
           th:placeholder="#{login.username}" name="username" required="" autofocus="">
    <input type="password" class="form-control"
           th:placeholder="#{login.password}" name="password" required="">
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me" th:text="#{login.rememberme}">
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}"></button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
    <a class="btn btn-sm" th:href="@{/toLogin(l='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/toLogin(l='en_US')}">English</a>
</form>
</body>
</html>
